<template>
    <view id="certitfy">
        <view>
            <view>
                <van-field
                        :value="params.id_name"
                        placeholder="请输入开户行姓名"
                        input-align="right"
                        label="姓名"
                        required
                        :border="has_boder"
                        @change="confirm1"
                />
            </view>

            <view>
                <van-field
                        :value="params.bank_number"
                        type="number"
                        placeholder="请输入银行卡号"
                        label="银行卡号"
                        input-align="right"
                        required
                        :border="has_boder"
                        @change="confirm2"
                />
            </view>
            <view>
                <van-field
                        :value="params.id_number"
                        type="idcard"
                        placeholder="请输入身份证"
                        label="身份证号码"
                        input-align="right"
                        required
                        :border="has_boder"
                        @change="confirm5"
                />
            </view>
            <view  @tap="chooseBankList">
                <van-field
                        :value="params.bank_name"
                        placeholder="请选择银行"
                        input-align="right"
                        label="银行"
                        disabled
                        required
                        :border="has_boder"
                />
            </view>
<!--            <view>-->
<!--                <van-field-->
<!--                        :value="params.subbranch"-->
<!--                        placeholder="请输入支行名称"-->
<!--                        label="支行名称"-->
<!--                        input-align="right"-->
<!--                        required-->
<!--                        :border="has_boder"-->
<!--                        @blur="confirm3"-->
<!--                />-->
<!--            </view>-->
<!--            <view @tap="chooseAddress" >-->
<!--                <van-field-->
<!--                        :value="params.province+params.city"-->
<!--                        placeholder="请选择城市"-->
<!--                        label="城市"-->
<!--                        input-align="right"-->
<!--                        required-->
<!--                        disabled-->
<!--                        :border="has_boder"-->
<!--                />-->
<!--            </view>-->
<!--            <view v-if="area_is_show" >-->
<!--                <van-area-->
<!--                        :area-list="areaList"-->
<!--                        :columns-placeholder="columns_placeholder"-->
<!--                        @confirm="chooseConfirm"-->
<!--                        @cancel="chooseCancel"-->
<!--                        title="城市选择"-->
<!--                />-->
<!--            </view>-->
            <view v-if="other_is_show">
                <van-field
                        :value="params.bank_mobile"
                        type="number"
                        placeholder="请输入手机号"
                        label="手机号"
                        input-align="right"
                        required
                        :border="has_boder"
                        @change="confirm4"
                />
            </view>
        </view>


        <view v-if="other_is_show" class="button-submit" @tap="commit()">
            <van-button type="info" round size="large" color="#FF9900" >确定</van-button>
        </view>
        <view class="tips"  v-if="other_is_show"><p>温馨提示：不可使用信用卡，否则提现无法到账</p></view>

        <van-popup :show="bank_list_show" position="bottom" :overlay="true"  @close="onClose($event)"
                   @touchmove.stop.prevent="moveHandle"
        >
            <van-picker show-toolbar title="选择银行" :columns="bankList" @cancel="onCancel($event)" @confirm="onConfirm($event)" @change="onChange($event)" />
        </van-popup>
    </view>
</template>

<script>
    import MInput from '@/components/m-input.vue'
    import {cityList} from '@/mock/address.js';
    import {bankList,bankNameList} from '@/mock/bank.js';
    export default{
        name:"addBankCard",
        data(){
            return{
                other_is_show:true,
                area_is_show:false,
                bank_list_show:false,
                has_boder:true,
                params:{
                    id_name:'',
                    bank_number:'',
                    id_number:'',
                    bank_name:'',
                    bank_id:'',
                    subbranch:'',
                    province:'',
                    city:'',
                    bank_mobile:'',
                    bank_truename:''
                },
                user_info:this.$store.state.user_info,
                columns_placeholder:['请选择', '请选择'],
                areaList:cityList,
                bankList:bankNameList,
                forEachBank:bankList
            }
        },
        mounted(){
            // if(this.user_info.bank_id!==undefined && this.user_info.bank_id>0){
            //     this.getBank(this.user_info.bank_id)
            //     this.params.id_name=this.user_info.id_name
            //     this.params.bank_number=this.user_info.bank_number
            //     this.params.id_number=this.user_info.id_number
            //     this.params.bank_id=this.user_info.bank_id
            //     this.params.subbranch=this.user_info.subbranch
            //     this.params.province=this.user_info.province
            //     this.params.city=this.user_info.city
            //     this.params.bank_mobile=this.user_info.bank_mobile
            // }

        },
        methods:{
            moveHandle () {},
            chooseAddress(){
                //点击地址选择事件，处理显示模块
                this.changeShowState();
            },
            chooseBankList(){
                wx.hideKeyboard()
                //点击选择银行列表
                this.bank_list_show=true
            },
            onChange(event) {// 选择银行事件
            },
            onClose(event) { // 遮罩关闭
                this.bank_list_show=false
            },
            onCancel(event){  //选择器取消
                this.bank_list_show=false
            },
            onConfirm(event){ //银行选择器确认
                this.bank_list_show=false
                const { picker, value, index } = event.detail;
                this.forEachBank.forEach((item)=>{
                    if(item.value===value){
                        this.params.bank_id=item.key
                        this.params.bank_name=value
                        return
                    }
                })
            },

            chooseConfirm(event){ // 地址返回
                // event.detail 为返回选重的数组
                let key=1
                event.detail.values.forEach((item)=>{
                    if(key===1){
                        this.params.province=item.name
                    }
                    if(key===2){
                        this.params.city=item.name
                    }
                    key++
                })
                this.changeShowState();
            },
            chooseCancel(event){
                this.changeShowState();
            },
            changeShowState(){
                this.other_is_show=!this.other_is_show
                this.area_is_show=!this.area_is_show
                this.tips_is_show=!this.tips_is_show
            },
            async commit(){ //确认提交
                console.log(this.params)
                if(this.params.id_name===''|| this.params.bank_number===''|| this.params.id_number===''|| this.params.bank_id===''||  this.params.bank_mobile===''){
                    uni.showToast({
                        title:"请将数据填写完整",
                        icon:"none",
                    })
                    return
                }
                let reg=/^([1-9]{1})(\d{15}|\d{18})$/;
                if(!reg.test(this.params.bank_number)){
                    uni.showToast({
                        title:"请输入正确的银行卡号",
                        icon:"none",
                    })
                    return
                }
                let reg1= /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/
                if(!reg1.test(this.params.bank_mobile)){
                    uni.showToast({
                        title:"请填写正确的手机号",
                        icon:"none",
                    })
                    return
                }
                let reg2 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                if(!reg2.test(this.params.id_number)){
                    uni.showToast({
                        title:"请输入正确的身份证号码",
                        icon:"none",
                    })
                    return
                }

                uni.showLoading({})
                this.params.bank_truename=this.params.id_name
                let res=await this.$apis.newBindBank(this.params)
                if(res.code===0){
                    let user_data = await this.$apis.getUserInfo({access_token:''})
                    if(user_data.code===0){
                        this.$store.commit("SET_USERINFO",user_data.data)
                    }
                    uni.showToast({
                        title:"添加成功",
                        icon:"none",
                    })
                    setTimeout(()=>{
                        uni.redirectTo({
                            url:'/pages/user/bankCardList'
                        })
                    },1500)
                }
                uni.hideLoading()
            },
            //获取银行列表
            async getBank(id){
                let resData=await  this.$apis.getBankList()
                if(resData.code===0){
                    resData.data.lists.forEach((item)=>{
                        if(item.id===id){
                            this.params.bank_name=item.name
                            return
                        }
                    })
                }
            },
            confirm1(event){ // 开户行姓名
                this.params.id_name=event.detail
            },
            confirm2(event){ //银行卡号

                this.params.bank_number=event.detail
            },
            confirm3(event){ // 支行名称
                this.params.subbranch=event.detail
            },
            confirm4(event){ // 手机号

                this.params.bank_mobile=event.detail
            },
            confirm5(event){ // 身份证
                this.params.id_number=event.detail
            },
        },
        components:{
            MInput
        }
    }
</script>

<style lang="less" scoped>
    .button-submit{
        width: 90%;
        margin-left: 5%;
        margin-top: 10rpx;
    }
    .tips{
        position: fixed;
        width: 100%;
        bottom: 20rpx;
        font-size: 25rpx;
        text-align: center;
        color: red;
    }
</style>
